<template>
  <div>
    <button @click="isShow=!isShow">切换</button>
  
      <!-- 使用第三方动画库 animate.css
        * 下载包 `npm i animate.css`
        * 入口文件引入 `import "animate.css"`
        * 给需要执行动画的元素添加类:animate__animated
        * 给需要执行动画元素的外层transition添加两个属性
          - enter-active-class:进入时要执行的动画animate__xxxxxxx
          - leave-active-class:离开时要执行的动画animate__xxxxxxx -->
          
        <transition enter-active-class="animate__lightSpeedInRight"
        leave-active-class="animate__lightSpeedOutLeft">
          <div v-if="isShow" class="box animate__animated"
          ></div>
        </transition>
        
        
      </div>
</template>

<script>
export default {
name:"App",
data(){
  return{
    isShow:true
  }
}
}
</script >

<style scoped>

.box{
  width: 400px;
  height: 400px;
  background-color: green;
}

</style>